<template>
  <div class="video-panel" v-if="videoList.length > 1">
    <div class="video-panel-title">
      <div class="title">
        视频选集<span class="video-count">({{currentP}}/{{videoList.length}})</span>
        <span class="iconfont icon-list"></span>
      </div>
      <el-switch v-model="autoplay" inactive-text="自动连播"/>
    </div>
    <el-scrollbar :max-height="600" class="video-list">
      <div :class="['video-item',index === currentP - 1 ? 'active' : '']"
           v-for="(item,index) in videoList" @click="selectVideo(index+1)">
        <div class="playing" v-if="index === currentP - 1"></div>
        <div class="title" :title="item.fileName">
          P{{index + 1}} {{item.fileName}}
        </div>
        <div class="duration">
          {{proxy.Utils.conertSecondsToHMS(item.duration)}}
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import {getCurrentInstance, onMounted, onUnmounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {GetloadVideoPList} from "@/api/video.js";
import {ElMessage} from "element-plus";
import video_loadVideoPList from "@/data/video_loadVideoPList.json"

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const autoplay = ref(true);
const videoList = ref([]);
const currentP = ref(route.query.p?route.query.p:1);
const loadVideoPlist = async () =>{
  const res = video_loadVideoPList;
  if(res.data == null||res.data === ""){
    ElMessage.error("视频被删除或不存在!");
    return;
  }
  videoList.value = res.data;
  for(let i = 0;i<videoList.value.length;i++){
    if(videoList.value[i].videoId === route.params.videoId){
      currentP.value = i + 1;
    }
  }
}
const selectVideo = (index) => {
  currentP.value = index;
  router.replace({
    name:"videoDetail",
    params: {
      videoId: videoList.value[index - 1].videoId,
    },
    query: {
      p: index,
    },
  });
  selectVideoFile()
};
const selectVideoFile = () => {
  mitter.emit("changeP",[videoList.value[currentP.value - 1].videoId,videoList.value[currentP.value - 1].filePath])
};
onMounted(() => {
  //等待1秒后加载视频列表，防止页面闪烁
  setTimeout(() => {
    loadVideoPlist();
  }, 1000);
  mitter.on("playEnd",()=>{
    if(autoplay.value&&videoList.value.length>1&&currentP.value<videoList.value.length){
      selectVideo(currentP.value+1);
    }
  })
});
onUnmounted(() => {
  mitter.off("playEnd");
});
watch(() => videoList.value, (newVal) => {
  if (videoList.value) {
    selectVideoFile();
  }
});
</script>
<style scoped lang="scss">
  .video-panel {
    padding: 10px;
    background-color: #f1f2f3;
    border-radius: 8px;
    .video-panel-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        padding: 10px;
        font-size: 16px;
        .video-count {
          font-size: 14px;
          color: #999;
        }
        .icon-list {
          font-size: 18px;
          cursor: pointer;
          margin-left: 10px;
          color: #757575;
          &:hover {
            color: #409EFF;
          }
        }
      }
    }
    .video-list {
      .video-item {
        padding: 6px 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-top: 5px;
        border-radius: 4px;
        .playing{
          width: 14px;
          height: 14px;
          margin-right: 5px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          background-image: url('@/assets/images/playing.gif');
        }
        .title{
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .duration{
          margin-left: 5px;
        }
        &:hover {
          color: #409EFF;
        }
      }
    }
    .active{
      color: #409EFF;
      background-color: #fff;
    }
  }
</style>